<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>5.键盘事件</title>
		<style>
			input{
				width: 300px;
			}
		</style>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				键盘事件
						1.Vue中常用的按键别名（牢牢掌握）：
								回车 => enter
								删除 => delete (捕获“删除”和“退格”键) 
								退出 => esc
								空格 => space
								换行 => tab（必须配	合keydown才有效果）
								上 => up
								下 => down
								左 => left
								右 => right
						2.备注：也可以使用keyCode去指定具体的按键，例如：@keyup.13去指定回车按键（不太推荐）
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<h1>欢迎来到{{name}}学习</h1>
			<input @keyup.enter="showMsg" type="text" placeholder="输入文字后，按下回车提示内容"> <br><br>
			<input @keyup.13="showMsg" type="text" placeholder="输入文字后，按下回车提示内容"> <br><br>
			<input @keyup.delete="showMsg" type="text" placeholder="输入文字后，按下删除提示内容"> <br><br>
			<input @keyup.esc="showMsg" type="text" placeholder="输入文字后，按下esc提示内容"> <br><br>
			<input @keyup.space="showMsg" type="text" placeholder="输入文字后，按下空格提示内容"> <br><br>
			<input @keydown.tab="showMsg" type="text" placeholder="输入文字后，按下tab提示内容"> <br><br>
			<input @keyup.up="showMsg" type="text" placeholder="输入文字后，按下↑提示内容"> <br><br>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			new Vue({
				el:'#demo',
				data:{
					name:'尚硅谷'
				},
				methods:{
					showMsg(event){
						alert(event.target.value)
					}
				}
			})
		</script>
	</body>
</html>